
<html>

<head>
	<style>
	
		* {
			margin: 0px;
			padding: 0px;
			font-size: 16px;
			background-color: white;
		}
		
		#examination {
			width: 100%;
		}
		
		.head {
			margin: 30px 0px 0px 40px;
		}
		
		.content {
			clear: both;   /*注意：导航栏使用浮动，这里先清除浮动*/
			width: 100%;
			margin: 0px 0px 0px 40px;
		}
		
		.head p {
			margin: 0px 0px 20px 0px;
			font-size: 28px;
		}
		
		.nav {
			margin: 0px 0px 70px 0px;
		}

		.head ul {
			position: relative;
		}
		
		.list_item{
			list-style-type: none;
			float: left;
			width: 100px;
			height: 30px;
			background-color: rgba(65,130,250,0.1);
			margin: 0px 15px 0px 0px;
			border-radius: 30px;
			text-align: center;

		}
		
		.list_item a {
			text-decoration: none;
			color: black;
		}
		
		.list_item:hover {
			background-color: #337ab7;
			color: white;
		}
		
		.box {
			margin: 0px 10px 0px 0px;
			position: relative;   /*使用层次定位*/
			top: 0px;
			float: left;
		}
		
		.box span {
			padding: 15px 0px 15px 10px;
			border: 1px solid #ddd;
			display: block;
		}
		
		.box a {
			text-decoration: none;
			color: black;
		}
		

	</style>
</head>

<body>
	<div id="examination">
		<div class="head">
			<p>考试必备</p>
			<div class="nav">
				<ul>
					<li class="list_item" onclick=changePicture(0)><a href="#">热门考试</a></li>
					<li class="list_item" onclick=changePicture(1)><a href="#">托福</a></li>
					<li class="list_item" onclick=changePicture(2)><a href="#">雅思</a></li>
					<li class="list_item" onclick=changePicture(3)><a href="#">零基础英语</a></li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="box">
				<a href="#"><img src="./pic/0/0.jpg" /></a>
				<a href="#"><span>投资中最重要的事，你得知道！</span></a>
			</div>
			<div class="box">
				<a href="#"><img src="./pic/0/1.jpg" /></a>
				<a href="#"><span>（英文课堂）中西双"民"隔空对话</span></a>
			</div>
			<div class="box">
				<a href="#"><img src="./pic/0/2.jpg" /></a>
				<a href="#"><span>（中文课堂）中西双"民"隔空对话</span></a>
			</div>
			<div class="box">
				<a href="#"><img src="./pic/0/3.jpg" /></a>
				<a href="#"><span>2021考研备考高分秘籍</span></a>
			</div>
		</div>
	</div>

</body>

<script>

	// 盒子弹起
	var boxs = document.getElementsByClassName("box");
	
	for (var i = 0; i < boxs.length; i++) {

		boxs[i].onmouseover = function (){
			// console.log(this);
			this.style.top = "-20px"; // 距原位置向上偏移20px
		};
		boxs[i].onmouseout = function() {
			this.style.top = "0px";   // 恢复到原位置
		}
	}
	
	
	function changePicture(index) {
		
		var new_src = "";
		var images = document.getElementsByTagName("img");
		
		for (var k = 0; k < images.length; k++) {

			new_src = "./pic/" + index + "/" + k + ".jpg";
			console.log(new_src);
			images[k].setAttribute("src", new_src);
		}
	}
</script>

</html>